import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import React from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'

export default function Home() {
  /* 
  页面跳转方法
  - navigation.push  创建新的页面栈 可调用pop 或 goBack
  - navigation.navigate  先查看当前是否有页面 如果没有 那么创建页面栈  
  - navigation.goBack() 返回上一级页面栈
  - navigation.replace  重定向
  */



  const navigation = useNavigation<StackNavigationProp<any>>()
  const pushPage = () => {
    navigation.push('mine')
  }
  const goBackPage = () => {
    navigation.goBack()
  }
  const navigatePage = () => {
    navigation.navigate('mine')
    
  }

  const replacePage = () => {
    navigation.replace('mine')
  }


  return (
    <View style={styles.root}>
      <Text>
        this is Home
      </Text>
      <View style={styles.btn}>
        <Button title='push' onPress={pushPage} />
      </View>
      <View style={styles.btn}>
        <Button title='navigate' onPress={navigatePage} />
      </View>
      <View style={styles.btn}>
        <Button title='goBack' onPress={goBackPage} />
      </View>
      <View style={styles.btn}>
        <Button title='nreplace' onPress={replacePage} />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center'
  },
  btn: {
    width: '50%',
    marginVertical: 20
  }
})